<template>
  <!-- 列表页面 -->
  <div class="tableSample" v-if="!showAdd && !showEdit">
    <div class="header">
      <div class="header-left">
        <p class="title">
          上架产品列表
          <el-button
              type="primary"
              plain
              style="margin-left: 30px;"
              @click="handleAdd"
          >添加</el-button
          >
        </p>
      </div>
      <div class="header-right">
        <lin-search @query="onQueryChange" placeholder="请输入产品名称" />
        <el-select v-model="search.store_id" clearable filterable placeholder="请选择店面" style="margin-left: 15px" @change="onSelectChange">
          <el-option
              v-for="item in storeData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 表格 -->
    <el-table border v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="产品信息" class="table-expand-title">
            </el-form-item>
            <el-form-item label="产品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="产品图片">
              <span>
                 <el-image :src="props.row.img.url" style="width: 100px"></el-image>
              </span>
            </el-form-item>
            <el-form-item label="产品状态">
              <span>{{ props.row.up_down }}</span>
            </el-form-item>
            <el-form-item label="排序">
              <span>{{ props.row.order_sort }}</span>
            </el-form-item>
            <el-form-item label="最多购买数量">
              <span>{{ props.row.max_num }}</span>
            </el-form-item>
            <el-form-item label="销量">
              <span>{{ props.row.sales_volume }}</span>
            </el-form-item>
            <el-form-item label="原价">
              <span>{{ props.row.original_price }}</span>
            </el-form-item>
            <el-form-item label="秒杀价">
              <span>{{ props.row.present_price }}</span>
            </el-form-item>
            <el-form-item label="好友分享价">
              <span>{{ props.row.new_user_price }}</span>
            </el-form-item>
            <el-form-item label="员工奖励">
              <span>{{ props.row.invite_cash }}</span>
            </el-form-item>
            <el-form-item label="员工复购返现">
              <span>{{ props.row.invite_cash_two }}</span>
            </el-form-item>
            <el-form-item label="团员奖励">
              <span>{{ props.row.group_invite_cash }}</span>
            </el-form-item>
            <el-form-item label="老顾客分享返现">
              <span>{{ props.row.new_user_invite_cash }}</span>
            </el-form-item>
            <el-form-item label="老板奖励">
              <span>{{ props.row.boss_cash }}</span>
            </el-form-item>
            <el-form-item label="开始使用时间">
              <span>{{ props.row.start_time }}</span>
            </el-form-item>
            <el-form-item label="结束使用时间">
              <span>{{ props.row.end_time }}</span>
            </el-form-item>
            <el-form-item label="产品详情">
              <span v-html="props.row.desc"></span>
            </el-form-item>
            <el-form-item label="优惠券信息" class="table-expand-title" v-if="props.row.coupon_status === '1' && props.row.coupon">
            </el-form-item>
            <el-form-item label="优惠券满额-得到" v-if="props.row.coupon_status === '1' && props.row.coupon">
              <span>{{ props.row.coupon.amount_of_money }}</span>
            </el-form-item>
            <el-form-item label="优惠券满额-使用" v-if="props.row.coupon_status === '1' && props.row.coupon">
              <span>{{ props.row.coupon.amount_of_money_use }}</span>
            </el-form-item>
            <el-form-item label="优惠券金额" v-if="props.row.coupon_status === '1' && props.row.coupon">
              <span>{{ props.row.coupon.money }}</span>
            </el-form-item>
            <el-form-item label="优惠券使用次数" v-if="props.row.coupon_status === '1' && props.row.coupon">
              <span>{{ props.row.coupon.usage_times }}</span>
            </el-form-item>
            <el-form-item label="开始使用时间" v-if="props.row.coupon_status === '1' && props.row.coupon">
              <span>{{ props.row.coupon.start_time }}</span>
            </el-form-item>
            <el-form-item label="结束使用时间" v-if="props.row.coupon_status === '1' && props.row.coupon">
              <span>{{ props.row.coupon.end_time }}</span>
            </el-form-item>
            <el-form-item label="店面信息" class="table-expand-title" >
            </el-form-item>
            <el-form-item label="店面名称" >
              <span>{{ props.row.store.name }}</span>
            </el-form-item>
            <el-form-item label="店面电话" >
              <span>{{ props.row.store.phone }}</span>
            </el-form-item>
            <el-form-item label="店面地址" >
              <span>{{ props.row.store.address }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="name"
          label="产品名称"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="store.name"
          label="所属店面"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="present_price"
          label="直推价格"
          width="100"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="invite_cash"
          label="直推奖励"
          width="120"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="invite_cash_two"
          label="复购奖励"
          width="120"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="new_user_price"
          label="裂变价格"
          width="120"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="new_user_invite_cash"
          label="顾客佣金"
          width="120"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="coupon.money"
          label="优惠券"
          width="120"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="start_time"
          label="开始使用时间"
          width="170"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="end_time"
          label="结束使用时间"
          width="170"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="create_time"
          label="创建时间"
          width="170"
      >
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
              type="primary"
              plain
              size="mini"
              @click.native.prevent.stop="handleEdit(scope.row)"
          >修改</el-button
          >
          <el-button
              type="danger"
              plain
              size="mini"
              @click.native.prevent.stop="handleDelete(scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" v-if="total_nums > 0">
      <el-button @click="setUpDown()">产品下架</el-button>
      <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="total_nums"
      ></el-pagination>

    </div>
  </div>
  <product-add
      v-else-if="showAdd"
      @addClose="addClose"
      :orderSort="orderSort"
  ></product-add>
  <product-edit
      v-else-if="showEdit"
      @editClose="editClose"
      :ProductId="ProductId"
  ></product-edit>
</template>

<script>
import Product from '@/models/product'
import Store from '@/models/store'
import LinSearch from '@/components/base/search/lin-search'
import ProductAdd from './ProductAdd'
import ProductEdit from './ProductEdit'

export default {
  components: {
    LinSearch,
    ProductAdd,
    ProductEdit,
  },
  data() {
    return {
      tableData: [],
      storeData: [],
      loading: false,
      showAdd: false,
      showEdit: false,
      productIds: [],
      orderSort: 0,
      ProductId: 0,
      search: {
        name: '',
        store_id: '',
      },
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
    }
  },
  computed: {},
  created() {
    this.getStoreAll()
    this._getTableData(this.currentPage, this.pageCount)
  },
  methods: {
    async setUpDown() {
      const res = await Product.upDownProduct({
        product_ids: this.productIds,
        up_down: 2,
      })
      if (res.error_code === 0) {
        this.$message({
          type: 'success',
          message: `${res.msg}`,
        })
        this.loading = true
        this._getTableData(this.currentPage, this.pageCount)
      }
    },
    handleSelectionChange(val) {
      const productIds = []
      val.forEach((item) => {
        productIds.push(item.id)
      })
      this.productIds = productIds
    },
    async getStoreAll() {
      this.storeData = await Store.getStoreAll()
    },
    handleDelete(val) {
      this
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const res = await Product.deleteProduct(val.id)
          if (res.error_code === 0) {
            this.$message({
              type: 'success',
              message: `${res.msg}`,
            })
            this.loading = true
            this._getTableData(this.currentPage, this.pageCount)
          }
        })
    },
    handleAdd() {
      if (this.tableData.length > 0) {
        this.orderSort = this.tableData[0].order_sort + 1
      }
      this.showAdd = true
    },
    handleEdit(val) {
      this.ProductId = val.id
      this.showEdit = true
    },
    addClose() {
      this.showAdd = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索名称
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 切换店面
    onSelectChange() {
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await Product.getProductList(start, count, {
        name: this.search.name,
        store_id: this.search.store_id,
        up_down: 1,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.tableSample {
  padding: 0 0 30px;

  .demo-table-expand {
    font-size: 0;
    margin-left: 30px;
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      width: 50%;
      margin-right: 0;
      margin-bottom: 0;
      display: flex;
      flex-direction: row;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-bottom: 1px solid #dae1ed;

    .header-left {
      float: left;

      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .header-right {
      float: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    margin: 20px;
  }
}
// dialog
.tableSample /deep/ .el-dialog__footer {
  text-align: left;
  padding-left: 30px;
}

.tableSample /deep/ .el-dialog__header {
  padding-left: 30px;
}

.tableSample /deep/ .el-dialog__body {
  padding: 30px;
}

.el-form--inline /deep/ .el-form-item__label{
  width: 180px;
  color: #99a9bf;
}
.tableSample .demo-table-expand .table-expand-title {
  width: 100%;
}
.table-expand-title /deep/ .el-form-item__label{
  color: #333333;
  font-size: 20px;
  width: 100%;
}
</style>
